<script setup>
	import FirstTitle from "@comp/FirstTitle";
	import {
		Editor,
		Toolbar
	} from "@wangeditor/editor-for-vue";
	import {
		onMounted
	} from "vue";

	import {
		searchDataQbxx
	} from "@/api/search";
	import {
		addOrUpdateQbxx
	} from "@/api/addOrUpdate";

	import {
		postTableData
	} from "@/api/table";


	const city = window.globalObj.name;
	const editorRef = shallowRef();
	const editorRef1 = shallowRef();
	const editorRef2 = shallowRef();
	const editorRef3 = shallowRef();
	const editorRef4 = shallowRef();
	const editorRef5 = shallowRef();

	const toolbarConfig = {};
	const toolbarConfig1 = {};
	const toolbarConfig2 = {};
	const toolbarConfig3 = {};
	const toolbarConfig4 = {};
	const toolbarConfig5 = {};

	const editorConfig = {
		placeholder: "请输入内容..."
	};
	const mode = ref("default");
	const mode1 = ref("default");
	const mode2 = ref("default");
	const mode3 = ref("default");
	const mode4 = ref("default");
	const mode5 = ref("default");

	// 加载html
	const initHtml = () => {
		searchDataQbxx({
			m: "通信网络"
		}).then((res) => {
			const {
				data
			} = res
			valueHtml.value = data.find((x) => x.k === "光纤通信网")?.v || "";
			valueHtml1.value = data.find((x) => x.k === "短波通信网")?.v || "";
			valueHtml2.value = data.find((x) => x.k === "卫星通信网")?.v || "";
			valueHtml3.value = data.find((x) => x.k === "集群通信网")?.v || "";
			valueHtml4.value = data.find((x) => x.k === "散射通信网")?.v || "";
			valueHtml5.value = data.find((x) => x.k === "北斗导航通信网")?.v || "";
		})
	};

	const handleCreated = (editor) => {
		editorRef.value = editor; // 记录 editor 实例，重要！
	};
	const handleCreated1 = (editor) => {
		editorRef1.value = editor; // 记录 editor 实例，重要！
	};
	const handleCreated2 = (editor) => {
		editorRef2.value = editor; // 记录 editor 实例，重要！
	};
	const handleCreated3 = (editor) => {
		editorRef3.value = editor; // 记录 editor 实例，重要！
	};
	const handleCreated4 = (editor) => {
		editorRef4.value = editor; // 记录 editor 实例，重要！
	};
	const handleCreated5 = (editor) => {
		editorRef5.value = editor; // 记录 editor 实例，重要！
	};



	const valueHtml = ref(
		"主用装备：光端机、光纤收发器、核心交换机、网络交换机、程控交换机、视频会议终端、MCU。<br/>联接关系：利用专用通信局光纤网络与各县（区）建立有线通信网。<br/>通联规定：按光纤通信有关规定执行。<br/>承载业务：指挥信息系统、视频会议系统、监控系统、文电传输系统、电话。"
	);

	const valueHtml1 = ref(
		"主用装备：125瓦军标电台、400瓦电台、20瓦电台。<br/>联接关系：利用125瓦军标电台与各县（区）建立短波通信网。<br/>通联规定：使用短波通信联络规定执行。<br/>承载业务：语音、数据、短信。"
	)
	const valueHtml2 = ref(
		"主用装备：便携卫星站、车载卫星站、固定卫星站。<br/>联接关系：利用卫星通信各县（区）建立卫星通信网。<br/>通联规定：按卫星通信联络规定执行。<br/>承载业务：视频会议、数据通信、文电传输、指挥信息系统（加保密机）、语音通信。"
	)
	const valueHtml3 = ref(
		"主用装备：手持终端、车载终端、基站。<br/>联接关系：利用400M超短波通信专与各县（区）建立集群通信网。<br/>通联规定：按集群通信联络规定执行。<br/>承载业务：语音、短信。"
	)
	const valueHtml4 = ref(
		"主用装备：车载散射站、固定散射站。<br/>联接关系：利用散射通信与县（区）建立散射通信网。<br/>通联规定：按散射通信联络规定执行。<br/>承载业务：指挥信息系统、视频会议系统、监控系统、文电传输系统、语音通信。"
	)
	const valueHtml5 = ref(
		"主用装备：终端（手持、车载）、指挥机、用户机。<br/>联接关系：利用北斗通信与各县（区）建立北斗卫星通信网。<br/>通联规定：按北斗导航通信联络规定执行。<br/>承载业务：导航定位、短报文通信<br/>"
	)

	const saveProgramme = () => {
		ElMessageBox.confirm(`确定要保存吗?`, "警告", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "warning",
			customClass: "message-box",
		}).then(() => {
			addOrUpdateQbxx({
					m: "通信网络",
					data: [{
							k: "光纤通信网",
							v: valueHtml.value,
						},
						{
							k: "短波通信网",
							v: valueHtml1.value,
						},
						{
							k: "卫星通信网",
							v: valueHtml2.value,
						},
						{
							k: "集群通信网",
							v: valueHtml3.value,
						},
						{
							k: "散射通信网",
							v: valueHtml4.value,
						},
						{
							k: "北斗导航通信网",
							v: valueHtml5.value,
						}

					],
				})
				.then((result) => {
					if (result.code === 200) {
						ElMessage.success("操作成功");
						initHtml();
					} else {
						ElMessage.error(result.msg);
					}
				})
				.catch(() => {});
		});
	}


	onBeforeUnmount(() => {
		const editor = editorRef.value;
		const editor1 = editorRef1.value;
		const editor2 = editorRef2.value;
		const editor3 = editorRef3.value;
		const editor4 = editorRef4.value;
		const editor5 = editorRef5.value;
		if (!editor) return;
		if (!editor1) return;
		if (!editor2) return;
		if (!editor3) return;
		if (!editor4) return;
		if (!editor5) return;
		editor.destroy();
		editor1.destroy();
		editor2.destroy();
		editor3.destroy();
		editor4.destroy();
		editor5.destroy();
	});

	// 表头单元格样式
	const headerCellStyle = () => {
		return {
			backgroundColor: "#f5f7fa",
			color: "rgba(0,0,0,0.85)",
			fontSize: "14px",
			height: "54px",
		};
	};
	// 单元格样式
	const cellStyle = () => {
		return {
			color: "rgba(0,0,0,0.65)",
			fontSize: "14px",
			lineHeight: "22px",
		};
	};

	const tableData1 = ref([])
	const tableData2 = ref([])
	const tableData3 = ref([])
	const tableData4 = ref([])
	const tableData5 = ref([])
	const tableData6 = ref([])

	const getList1 = () => {
		return postTableData({
			docType: "intelligence",
			method: "guangxiantongxindanwei",
		}).then(result => {
			if (result.code === 200) {
				tableData1.value = result?.data || []
			}
		})
	}
	const getList2 = () => {
		return postTableData({
			docType: "intelligence",
			method: "duanbotongxindanwei",
		}).then(result => {
			if (result.code === 200) {
				tableData2.value = result?.data || []
			}
		})
	}
	const getList3 = () => {
		return postTableData({
			docType: "intelligence",
			method: "weixintongxindanwei",
		}).then(result => {
			if (result.code === 200) {
				tableData3.value = result?.data || []
			}
		})
	}
	const getList4 = () => {
		return postTableData({
			docType: "intelligence",
			method: "jiquntongxindanwei",
		}).then(result => {
			if (result.code === 200) {
				tableData4.value = result?.data || []
			}
		})
	}
	const getList5 = () => {
		return postTableData({
			docType: "intelligence",
			method: "sanshetongxindanwei",
		}).then(result => {
			if (result.code === 200) {
				tableData5.value = result?.data || []
			}
		})
	}
	const getList6 = () => {
		return postTableData({
			docType: "intelligence",
			method: "beidoudaohangdanwei",
		}).then(result => {
			if (result.code === 200) {
				tableData6.value = result?.data || []
			}
		})
	}
	onMounted(async () => {
		await initHtml();
		await getList1()
		await getList2()
		await getList3()
		await getList4()
		await getList5()
		await getList6()
	});
</script>
<template>
	<div class="">
		<div class="top-15">
			主要明确光纤、短波、卫星、集群、散射、北斗导航等通信网的网络组织、主要装备、联接关系、通联规定、承载业务等。
		</div>
		<FirstTitle name="光纤通信网" class="top-15" />
		<div class="top-15 text-center">
			{{city}}光纤通信网参加单位表
		</div>
		<el-table id="table" :data="tableData1" class="top-15" style="width: 100%" :header-cell-style="headerCellStyle"
			:cell-style="cellStyle" border>
			<el-table-column prop="rowNum" label="序号" width="100" align="center" />
			<el-table-column prop="jd_name" label="行政区划" />
			<el-table-column prop="fl" label="分类" />
			<el-table-column prop="cjdw" label="参加单位" />
		</el-table>
		<div style="border: 1px solid #ccc" class="top-15">
			<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
				:mode="mode" />
			<Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig"
				:mode="mode" @onCreated="handleCreated" />
		</div>


		<FirstTitle name="短波通信网" class="top-15" />
		<div class="top-15 text-center">
			{{city}}短波通信网参加单位表
		</div>
		<el-table id="table" :data="tableData2" class="top-15" style="width: 100%" :header-cell-style="headerCellStyle"
			:cell-style="cellStyle" border>
			<el-table-column prop="rowNum" label="序号" width="100" align="center" />
			<el-table-column prop="jd_name" label="行政区划" />
			<el-table-column prop="fl" label="分类" />
			<el-table-column prop="cjdw" label="参加单位" />
		</el-table>
		<div style="border: 1px solid #ccc" class="top-15">
			<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef1" :defaultConfig="toolbarConfig1"
				:mode="mode1" />
			<Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml1" :defaultConfig="editorConfig"
				:mode="mode1" @onCreated="handleCreated1" />
		</div>



		<FirstTitle name="卫星通信网" class="top-15" />
		<div class="top-15 text-center">
			{{city}}卫星通信网参加单位表
		</div>
		<el-table id="table" :data="tableData3" class="top-15" style="width: 100%" :header-cell-style="headerCellStyle"
			:cell-style="cellStyle" border>
			<el-table-column prop="rowNum" label="序号" width="100" align="center" />
			<el-table-column prop="jd_name" label="行政区划" />
			<el-table-column prop="fl" label="分类" />
			<el-table-column prop="cjdw" label="参加单位" />
		</el-table>
		<div style="border: 1px solid #ccc" class="top-15">
			<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef2" :defaultConfig="toolbarConfig2"
				:mode="mode2" />
			<Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml2" :defaultConfig="editorConfig"
				:mode="mode2" @onCreated="handleCreated2" />
		</div>

		<FirstTitle name="集群通信网" class="top-15" />
		<div class="top-15 text-center">
			{{city}}集群通信网参加单位表
		</div>
		<el-table id="table" :data="tableData4" class="top-15" style="width: 100%" :header-cell-style="headerCellStyle"
			:cell-style="cellStyle" border>
			<el-table-column prop="rowNum" label="序号" width="100" align="center" />
			<el-table-column prop="jd_name" label="行政区划" />
			<el-table-column prop="fl" label="分类" />
			<el-table-column prop="cjdw" label="参加单位" />
		</el-table>
		<div style="border: 1px solid #ccc" class="top-15">
			<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef3" :defaultConfig="toolbarConfig3"
				:mode="mode3" />
			<Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml3" :defaultConfig="editorConfig"
				:mode="mode3" @onCreated="handleCreated3" />
		</div>

		<FirstTitle name="散射通信网" class="top-15" />
		<div class="top-15 text-center">
			{{city}}散射通信网参加单位表
		</div>
		<el-table id="table" :data="tableData5" class="top-15" style="width: 100%" :header-cell-style="headerCellStyle"
			:cell-style="cellStyle" border>
			<el-table-column prop="rowNum" label="序号" width="100" align="center" />
			<el-table-column prop="jd_name" label="行政区划" />
			<el-table-column prop="fl" label="分类" />
			<el-table-column prop="cjdw" label="参加单位" />
		</el-table>
		<div style="border: 1px solid #ccc" class="top-15">
			<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef4" :defaultConfig="toolbarConfig4"
				:mode="mode4" />
			<Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml4" :defaultConfig="editorConfig"
				:mode="mode4" @onCreated="handleCreated4" />
		</div>

		<FirstTitle name="北斗导航通信网" class="top-15" />
		<div class="top-15 text-center">
			{{city}}北斗导航通信网参加单位表
		</div>
		<el-table id="table" :data="tableData6" class="top-15" style="width: 100%" :header-cell-style="headerCellStyle"
			:cell-style="cellStyle" border>
			<el-table-column prop="rowNum" label="序号" width="100" align="center" />
			<el-table-column prop="jd_name" label="行政区划" />
			<el-table-column prop="fl" label="分类" />
			<el-table-column prop="cjdw" label="参加单位" />
		</el-table>
		<div style="border: 1px solid #ccc" class="top-15">
			<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef5" :defaultConfig="toolbarConfig5"
				:mode="mode5" />
			<Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml5" :defaultConfig="editorConfig"
				:mode="mode5" @onCreated="handleCreated5" />
		</div>





		<div class="flex-justify-end top-20">
			<el-button type="primary" class="save-btn" @click="saveProgramme">保存</el-button>
		</div>
	</div>
</template>
<style scoped lang="scss"></style>